﻿<UserControl
    x:Class="DataBindingExample.CustomControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:DataBindingExample"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300"
    d:DesignWidth="400">

    <Grid d:DataContext="{local:ViewModel}">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="1*"></ColumnDefinition>
            <ColumnDefinition Width="1*"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
            <Slider 
                Value="{Binding Percentage, Mode=TwoWay}"
                    HorizontalAlignment="Center"
                    VerticalAlignment="Center"
                    Width="400"
                    Minimum="0"
                    Maximum="100"
                    StepFrequency="1.0"></Slider>
            <TextBlock Text="{Binding Percentage}" Style="{StaticResource HeaderTextBlockStyle}"></TextBlock>
        </StackPanel>
        <Ellipse Grid.Column="1"
                     Fill="Red"
                     Stroke="Blue"
                     StrokeThickness="2">
            <Ellipse.RenderTransform>
                <ScaleTransform ScaleX="{Binding Percentage, Converter={StaticResource ToPercentage}}"
                                    ScaleY="{Binding Percentage, Converter={StaticResource ToPercentage}}"></ScaleTransform>
            </Ellipse.RenderTransform>
        </Ellipse>
    </Grid>
</UserControl>
